<template>
	<view>
		<view class="flex navBox">
			<view class="Nav" v-for="(item,index) in navList" :key="index" >
				<text :class="index==Navindex?'avator':''" @click="setNav(index)">{{item}}</text> 
			</view>
		</view>
		
		<view v-if="Navindex==0">
			<view class="typeNav flex">
				<view class="rectype" v-for="(item,index) in typeList" :key="index" :class="index==typeindex?'avator1':''" @click="settypeNav(index)">
					{{item}}
				</view>
			</view>
			
			<view v-if="typeindex==0">
				<view class="recBox">
					<view class="retTip">
						请输入充值金额（元）
					</view>
					<view class="recinputBox flex">
						<text>￥</text>
						<input type="number" v-model="pdr_amount" maxlength="10" value="" />
					</view>
					<view class="recBtn" @click="recharge_add()">
						立即充值
					</view>
				</view>
			</view>
			<view v-if="typeindex==1">
				<view class="recBox">
					<view class="retTip">
						请输入平台充值卡号
					</view>
					<view class="recinputBox flex">
						<input type="text" v-model="rc_sn" maxlength="40" value="" />
					</view>
					<view class="recBtn" @click="rechargecard_add()">
						立即充值
					</view>
				</view>
			</view>
		</view>
		
		
		<view v-if="Navindex==1">
			<view class="balanceBox flex">
				<view class="available">
					可用金额：<text>{{member_info.available_predeposit}}</text>元
				</view>
				<view class="frozen">
					冻结金额：<text>{{member_info.freeze_predeposit}}</text>元
				</view>
			</view>
			
			<view class="searchBox flex">
				<view class="">充值单号</view>
				<input class="searchInput" v-model="pay_sn" maxlength="30" type="text" value="" />
				<view class="searchBtn" @click="getPredeposit()">搜索</view>
			</view>
			
			<view class="ListBox">
				<view class="List"  v-for="(item,index) in orderlist" :key="index">
					<view class="order" >
						<view class="Title flex">
							<view class="">
								充值单号：{{item.pay_sn}}
							</view>
							<!-- <view>{{item.state_desc}}</view> -->
							<view v-if="item.order_state==0" style="color: #D6B552;">已取消</view>
							<view v-if="item.order_state==10" style="color: red;">未支付</view>
							<view v-if="item.order_state==80" style="color: #09BB07;">已完成</view>
							<view v-if="item.order_state==90" style="color: #D6B552;">交易关闭</view>
<!-- 							<view v-if="item.order_state==10" style="color: red;">{{item.state_desc}}</view>
							<view v-if="item.order_state==40" style="color: #09BB07;">{{item.state_desc}}</view> -->
						</view>
						<view class="Time">
							充值时间：{{item.add_time |formaDate}}
						</view>
						<view class="recmoney flex">
							<view class="">
								充值金额：{{item.order_amount}}
							</view>
							<view v-if="item.order_state==80">
								支付方式：<text v-if="item.payment_code=='wxpay'">微信</text>
								<text v-if="item.payment_code=='alipay'">支付宝</text>
							</view>
						</view>
						<view class="flex" style="padding: 20rpx;">
							<view class=""></view>
							<view class="flex" v-if="item.order_state==0">
								<view class="orderBtn" @click="recharge_del(item.order_id)">删除</view>
							</view>
							<view class="flex" v-if="item.order_state==10">
								<view class="orderBtn bgco" @click="Topay(item.pay_sn)">支付</view>
							</view>
							
						</view>
					</view>
				</view>
				<view class="" v-if="orderlist.length<=0">
					<image :src="`${picUrl}/InfoNull.png`" style="width: 100%;" mode="widthFix"></image>
				</view>
				
			</view>
			
		</view>
		
		
		<view v-if="Navindex==2">
			<view class="balanceBox">
				<view class="available">
					可用充值卡余额：<text>{{member_info.available_rc_balance}}</text>元
				</view>
				<view class="frozen">
					冻结充值卡余额：<text>{{member_info.freeze_rc_balance}}</text>元
				</view>
			</view>
			
			<view class="ListBox">
				<view class="List" v-for="(item,index) in orderlist" :key="index">
					<view class="order" >
						<view class="Title ">
							<view class="">
								创建时间：{{item.add_time |formaDate}}
							</view>
						</view>
						<view class="Time">
							收入（元）：{{item.available_amount}}
						</view>
						<view class="recmoney">
							冻结（元）：{{item.freeze_amount}}
						</view>
						<view class="recmoney">
							<!-- 平台充值卡充值，充值卡号： -->
							{{item.description}}
						</view>
					</view>
				</view>
				<view class="" v-if="orderlist.length<=0">
					<image :src="`${picUrl}/InfoNull.png`" style="width: 100%;" mode="widthFix"></image>
				</view>
				
			</view>
		</view>
		<go-top :isShow='isShow'></go-top>
	</view>
</template>

<script>
	import goTop from '@/components/go-top/go-top.vue'
	export default {
		components: {
			goTop
		},
		data() {
			return {
				navList:["在线充值","充值明细","充值卡余额"],
				Navindex:0,
				typeList:["现金充值","充值卡充值"],
				typeindex:0,
				pdr_amount:"",//充值金额
				rc_sn:"",//充值卡号
				orderlist:[],//订单列表
				member_info:"",//余额信息
				pay_sn:"",
				curpage:1,
				isShow:false//返回顶部火箭头
			}
		},
		onShow() {
			if(this.$store.state.isRecharge.isMoney==1){
				this.setNav(1)
				this.$store.commit('fnRecharge',0)　
			}
		},
		onPageScroll(res) {
			if(res.scrollTop>200){
				this.isShow=true
			}else{
				this.isShow=false
			}
		},
		onReachBottom(e) {
			if(this.Navindex==1){//现金充值下拉加载
				if(this.curpage){
					this.getPredeposit(true)
				}else{
					uni.showToast({
						title:"到底了哦~~",
						icon:"none"
					})
				}
			}else if(this.Navindex==2){//充值卡下拉加载
				if(this.curpage){
					this.getPredeposit(true)
				}else{
					uni.showToast({
						title:"到底了哦~~",
						icon:"none"
					})
				}
			}
			
		},
		methods: {
			setNav(index){
				this.Navindex = index;
				this.curpage = 1
				if(index!=0 ){
					this.getPredeposit()
				}
			},
			
			rechargecard_add(){//平台充值卡充值
			let _this=this
			if(!this.rc_sn){
				uni.showToast({
					title:"充值卡号不能为空！",
					icon:"none"
				})
				return false
			}
				this.$util.request({
					url: '/mobile/index.php?act=predeposit&op=rechargecard_add',
					method: 'post',
					data: {
						rc_sn:this.rc_sn,
						
					},
				}).then((res)=> {
					if(res.error_code==0){
						uni.showToast({
							title:"充值成功！",
							icon:"none",
							success(){
								_this.setNav(2)
							}
						})
						
						
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
				})
			},
			settypeNav(index){
				this.typeindex = index
			},
			Topay(pay_sn){//去支付
				uni.navigateTo({
					url:"/plug/pay/cashier?type=3&pay_sn="+pay_sn
				})
			},
			recharge_del(order_id){//删除充值记录
				this.$util.request({
					url: '/mobile/index.php?act=predeposit&op=recharge_del',
					method: 'get',
					data: {
						order_id:order_id,
					},
				}).then((res)=> {
					if(res.error_code==0){
						uni.showToast({
							title:"删除成功！",
							icon:"none"
						})
						this.getPredeposit()
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
				})
			},
			getPredeposit(state){//获取充值列表
				 let url = ""
				 if(this.Navindex==1){
					 url = '/mobile/index.php?act=predeposit&op=index'
				 }else if(this.Navindex==2){
					 url = '/mobile/index.php?act=predeposit&op=rcb_log_list'
				 }
				this.$util.request({
					url: url,
					method: 'get',
					data: {
						curpage:this.curpage,
						pay_sn:this.pay_sn, 
						pagesize:20
					},
				}).then((res)=> {
					if(res.error_code==0){
						if(state){
							this.orderlist = this.orderlist.concat(res.datas.list)
						}else{
							this.orderlist = res.datas.list
						}
						this.member_info = res.datas.member_info
						if(res.datas.paged.hasmore){
							this.curpage++;
						}else{
							this.curpage=false;
						}
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
				})
			},
			recharge_add(){//现金充值下单
				var that=this		
				if(!this.pdr_amount){
					uni.showToast({
						title:"充值金额不能为空！",
						icon:"none"
					})
					return false
				}
				this.$util.request({
					url: '/mobile/index.php?act=predeposit&op=recharge_add',
					method: 'post',
					data: {
						pdr_amount:this.pdr_amount,
						order_from:2
					},
				}).then((res)=> {
					if(res.error_code==0){
						uni.navigateTo({
							url:"/plug/pay/cashier?type=3&pay_sn="+res.datas.pay_sn
						})
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
				})
			},
		}
	}
</script>

<style>
	.bgco{
		background-color: #51A351 !important;
		color: #FFFFFF !important;
	}
	.orderBtn{
		background-color: #EEEEEE;
		padding: 0 30rpx;
		border-radius: 10rpx;
		margin-left: 20rpx;
	}
	.Time,.recmoney{
		margin:10rpx 20rpx;
	}
	.Title{
		background-color: #CBE7CE;
		padding:5rpx 20rpx;
	}
	.List{
		background-color: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
		padding-bottom: 30rpx;
		margin-bottom: 20rpx;
	}
	.ListBox{
		margin: 20rpx;
	}
	.ListBox view{
		font-size: 24rpx;
	}
	.searchBtn{
		background-color:#FF4F01;
		color: #FFF9FC;
		padding: 0 20rpx;
		border-radius: 15rpx;
		font-size: 24rpx;
		line-height: 50rpx;
	}
	.searchInput{
		background-color: #FFFFFF;
		border-radius: 30rpx;
		border: 1rpx solid #EEEEEE;
		width: 440rpx;
		line-height: 50rpx;
		padding: 0 20rpx;
		height: 50rpx;
	}
	.searchBox{
		margin: 0 20rpx 50rpx;
	}
	.frozen,.available{
		font-size: 24rpx;
	}
	.available text{
		color: #9C2216;
		font-size: 28rpx;
	}
	.frozen text{
		color: #2192E8;
		font-size: 28rpx;
	}
	.balanceBox{
		background-color: #FCF4CD;
		margin:20rpx;
		padding:10rpx 20rpx;
		border-radius: 20rpx;
		color: #000000;
	}
	.recBtn{
		margin: 40rpx auto;
		background-color:#FF4F01;
		color: #FFF9FC;
		text-align: center;
		width: 300rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		
	}
	.recinputBox{
		border-bottom: 1rpx solid #EEEEEE;
		height: 80rpx;
	}
	.recinputBox text{
		font-size: 40rpx;
		font-weight: bold;
	}
	.recinputBox input{
		width: 620rpx;
	}
	.retTip{
		font-size: 26rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}
	.recBox{
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		
	}
	.rectype{
		width: 50%;
		background-color: #EEEEEE;
		text-align: center;
		
	}
	.avator1{
		background-color: #FF4F01;
		color: #FFF9FC;
	}
	.typeNav{
		margin: 30rpx 20rpx;
		border-radius: 15rpx;
		overflow: hidden;
		width: 710rpx;
	}
	.Nav{
		width: 50%;
		text-align: center;
		line-height: 60rpx;
	}
	.avator{
		color: #812218;
		border-bottom: 3rpx solid #812218;
	}
	.navBox{
		background-color: #FFFFFF;
	}
	.flex{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>
